<template>
  <div>
    {{ viewdata.title }}
  </div>

  <div>
    <input type="text" v-model="viewdata.username" />
    {{ viewdata.username }}
  </div>

  <div>
    <input type="checkbox" v-model="visible" />
    {{ visible }}
  </div>

  <hr />

  <div>
    <input type="text" v-model="user.username" />
    <input type="text" v-model="user.password" />
    {{ user }}
    <hr />
    <input type="text" v-model="refuser.username" />
    <input type="text" v-model="refuser.password" />
    {{ refuser }}
    <hr />
    <button @click="diff1()">查看ref和reactive的区别</button>
    <button @click="diff2();refuser.password='22';">再次查看ref和reactive的区别</button>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'


// reactive可以将对象转换成响应式
const viewdata = reactive({
  title: '响应式对象',
  username: '',
})

// ref也可以将对象转换成响应式
const visible = ref(false)
// 第一个差别：ref支持简单值类型，reactive只支持对象类型

const user = reactive({
  username: '',
  password: '',
})

const refuser = ref({
  username: '',
  password: '',
})

// vue的事件处理
function diff1() {
  // 在页面上使用两个毫无区别
  // 但是在script中获取ref对象的值要加上value属性
  console.log('两个不同的响应式对象：', user, refuser, refuser.value)
}

function diff2() {
  user.username = 'reactive'
  refuser.value.username = 'ref'
}
</script>
<style></style>
